<!DOCTYPE html>
<html lang="en">
<head>
  <meta content="text/html; charset=UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">
  <title>stag</title>
  <style>
  .red{
    background:#f00;
  }
  </style>
</head>
<body>
<p class="p" style="position:absolute;top:0;left:0;" id="p1">p1</p>
<p class="p" id="p2">p2</p>
<p class="p" id="p3">p3</p>
<input type="text" id="input1" value="12313">
<input type="text" id="input2" value="xxx">
<select name="" id="select1">
  <option value="1111">11111</option>
  <option value="2222">22222</option>
  <option value="3333">33333</option>
  <option value="4444">44444</option>
</select>
<ul id="box"></ul>
</body>
<!-- <script src="src/stab.js"></script>
<script src="src/stab.event.js"></script>
<script src="src/stab.ajax.js"></script>
<script src="src/stab.anim.js"></script>
<script src="src/stab.router.js"></script>
<script src="src/stab.tmpl.js"></script>
<script src="src/stab.tap.js"></script> -->

<script src="dist/stab.all.min.js"></script>
<script type="text/html" id="tpl">
  {% for(var i in this){ %}
    <li id="{%=i%}">{%=this[i]%}</li>
  {% } %}
</script>
<script>
var $ = stab;

stab.fn.xx = function(){
  console.log(this)
}
stab('.p').xx()
console.log(stab('p'))
console.log(stab('.p').length)
var a = stab('#p1')
console.log(a)
a.push('xxx');
console.log(a)
console.log(a.length)

var b = a.prev()
console.log(a)
console.log(b)
console.log(stab('#p2').prev())

console.log(stab('input').val())
console.log(stab('input').val('dddd').next());

console.log(stab('#select1')[0].selectedIndex);
console.log(stab('#select1')[0].options);
console.log(stab('#select1').val());
console.log(stab('#select1').text());
console.log(stab('#select1').html());
console.log(stab('#select1').val('hahahaha'));
console.log(stab('input').val('dddd').next());

console.log(stab('#p1').css('background-color'))
console.log(stab('#p1').addClass('red'))
console.log(stab('#p1').hasClass('red'))
console.log(stab('#p1').css('background-color'))
console.log(stab('#p1').css('background-color:#f0f'))
console.log(stab('#p1').css('background-color'))
console.log(stab('#p1').offset())
console.log(stab('#p1').attr('class'))


// event

$('select').on('change', function(){
  alert($('select').val())
})

$('#p1').on('xxx', function(){
  console.log(this)
})

$('#input1').one('input', function(){
  console.log(this.value)
  $('#p1').trigger('xxx')
})


// ajax GET
$.ajax('/README.md?a=1&b=2', function(resp){
  // console.log(resp)
})

// POST
$.ajax('/README.md', 'a=1&b=2', function(resp){
  // console.log(resp)
})

$.ajax('/README.md', {c:3, d:4}, function(resp){
  // console.log(resp)
})


$('#p1').tap(function(e){
  console.log(e)
})

setTimeout(function(){
  $('#p1').anim('top:500px;left:500px;', function(){
    this.anim('top:100px;left:100px;', function(){
      this.anim('left:300px;background-color:#f00;', function(){
        console.log(this.css())
      })
    }, 1)
  }, 3)
}, 1000);


$.router.on('xx', function(){
  console.log('router: xx')
}).on('index', function(){
  console.log('index')

}).init()

setTimeout(function(){
  location.hash = 'xx';
}, 3000)

// tmpl, cp
var tplStr = $('#tpl').html()
var tplObj = {aaa: 'aaaaaaa', bbb: 'bbbbbbb', ccc: 'ccccccc', ddd: 'ddddddd'}
var tplHtml = $.tmpl(tplStr, tplObj)
console.log(tplHtml)

var xtpl = $('#box').cp(tplStr, tplObj, '#box{color:#f00}', function(){
  console.log(this)
  console.log(this.data)
  console.log(this.html)
  console.log(this.caller)
  console.log(this.src)
  var _this = this
  $('#aaa').on('click', function(){
    _this.data.aaa = 'click..'
    _this.update();
    console.log(_this)
  })
})
console.log(xtpl)
console.log(xtpl.html)

console.log($('#p3').prev().prev())
console.log($('#p3').prev().next())

</script>
</html>